---
title: Text
---

# Text

Primitive typographic component.

```js
import { Text } from 'theme-ui'
```

```jsx live=true
<Text variant='caps'>Hello</Text>
<Text
  sx={{
    fontSize: 2,
    fontWeight: 'bold',
    display: 'block'
  }}
>
  How's it going?
</Text>
```

## Variants

Text style variants can be defined in the `theme.text` object. The Text
component uses `theme.text.default` as its default variant style.

```js
// example theme variants
{
  text: {
    default: {
      color: 'text',
      fontSize: 3,
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.2em',
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
  }
}
```
